<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      #app {
        display: flex;
      }

      .box {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <!-- 
      template 元素的作用：
        1. 用于实现一个包裹元素，渲染时是不会生成html结构的
        2. 不会影响到我们已经写好的央视

      v-show 指令的作用：
        与 v-if 一样，能够控制元素的显示隐藏

      v-if 与 v-show 的区别：
        1. 两者都是控制元素显示隐藏的一个指令
        2. v-if 是真正的条件渲染，而 v-show 只是简单的控制元素的样式
        3. v-if 条件为真，元素会被创建出来，条件为假，元素会被移除。
           v-show 条件为假，元素会增加一个 display: none 的样式
        4. v-if 有更高的切换开销
           v-show 有更高的初始渲染开销，不管条件为真还是为假，元素都会被创建出来
        5. 如果需要频繁的显示隐藏切换，则推荐使用 v-show，否则使用 v-if 

      template 元素能与 v-show 一起使用嘛
        不可以，因为 v-show 需要控制元素的 display 样式，而 template 元素最终不会渲染出来

      


     -->

    <div id="app">
      <!-- <button v-show="show">V-SHOW</button>

      <hr />

      <button v-if="show">V-IF</button> -->

      <!-- <template v-show="type === 'A'">
        <div class="box">A</div>
        <div class="box">AA</div>
        <div class="box">AAA</div>
      </template>

      <div v-if="type === 'A'">
        <div>A</div>
        <div>AA</div>
        <div>AAA</div>
      </div>

      <div v-else>
        <div>B</div>
        <div>BB</div>
        <div>BBB</div>
      </div> -->
    </div>

    <script src="../../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            type: "A",
            show: true,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
